<template>
  <component :is="useNormalMap ? 'map-core-normal' : 'map-core'" :map-options="getMapOptions" v-bind="$attrs">
    <template #default="scope">
      <slot v-bind="scope" />
    </template>
  </component>
</template>

<script>
import MapCore from './map-core.vue';
import MapCoreNormal from './map-core-normal.vue';
const defaultStyle = 'amap://styles/cfd800a417c5e6683065b909ce2cee62';

export default {
  name: 'basic-map',
  components: { MapCore, MapCoreNormal },
  props: {
    mapStyleKey: { type: String, default: defaultStyle },
    mapOptions: { type: [Object, Function], default: undefined },
    useNormalMap: { type: Boolean, default: true },
  },
  // setup() {
  //   return { MapCore, MapCoreNormal };
  // },
  data() {
    return {};
  },
  methods: {
    getMapOptions() {
      const opt = {
        // mapStyle: this.mapStyleKey,
        // gray dark blue darkblue
        mapStyle: 'amap://styles/grey',
        expandZoomRange: true,
        zooms: [3, 24],
        viewMode: '3D',
        pitch: 55,
        zoom: 9,
        features: ['bg', 'point', 'road'],
        layers: [
          // 高德默认标准图层
          new AMap.TileLayer(),
          // 楼块图层
          new AMap.Buildings({
            zIndex: 130,
            merge: false,
            sort: false,
            opacity: 1,
            zooms: [12, 20],
            //n倍于默认高度，3D下有效
            heightFactor: 5,
          }),
        ],
      };
      const option = typeof this.mapOptions === 'function' ? this.mapOptions() : this.mapOptions;
      return Object.assign({}, opt, option);
    },
  },
};
</script>

<style></style>
